<template>
    <el-main style="background-color: rgb(240,243,243);height: 100%;">
        <div class="mainDiv">
            <div class="rowHead">
                <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="选择日期范围（默认当天日期）" :picker-options="timeArea" v-qx="permission.date" @change="getSubjectFeat">
                </el-date-picker>               
            </div>
            <div style="flex: 1;">
                <el-col :span="10" class="pl0" style="height: 100%;">        
                    <el-table :data="onelevelFeat" height="100%" id="leftTable" @row-click="" @expand-change="showtwolevel">
                        <el-table-column type="expand">
                          <template slot-scope="scope">
                            <el-table :data="scope.row.list" :stripe="true" @expand-change="showthirdlevel" @row-click="">
                                <el-table-column type="expand">
                                  <template slot-scope="scope">
                                    <el-table :data="scope.row.list" :stripe="true" @row-click="">
                                        <el-table-column prop="name" label="包含项目"></el-table-column>
                                        <el-table-column prop="total" label="消费数量"></el-table-column>                         
                                    </el-table> 
                                  </template>                                   
                                </el-table-column>
                                <el-table-column prop="tname" label="次分类" :show-overflow-tooltip="true"></el-table-column>
                                <el-table-column prop="ttotal" label="消费数量">
                                </el-table-column>             
                            </el-table>
                          </template>
                        </el-table-column>
                        <el-table-column prop="oname" label="主分类" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ototal" label="消费数量">
                        </el-table-column>                     
                    </el-table>         
                </el-col>
            </div>
            
        </div>
    </el-main> 
</template>
<script>
import C from '@/common/common.js'

export default {
  data () {
    return {
      featnum: [],
      featnum2: [],
      onelevelFeat: [],
      times: [new Date(), new Date()],
      timeArea: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, td])
          }
        }]
      },
      permission: {
        date: 'bumenfeat_date',
        info: 'bumenfeat_info'
      }
    }
  },
  created () {
    let that = this
    that.getSubjectFeat()
  },
  methods: {
    showthirdlevel: async function (row) {
      let that = this
      let id = row.id
      let featnum2 = that.featnum2
      let thcategory = []
      featnum2.forEach((v) => {
        if (v.categoryid == id && v.total > 0) {
          thcategory.push({'name': v.name, 'total': v.total})
        }
      })
      row.list = thcategory
    },

    showtwolevel: async function (row) {
      let that = this
      let id = row.id
      let featnum = that.featnum
      let tcategory = []
      featnum.forEach((v) => {
        if (v.pid == id && v.allnum > 0) {
          tcategory.push({'tname': v.name, 'ttotal': v.allnum, 'id': v.id})
        }
      })
      row.list = tcategory
    },

    getSubjectFeat: async function () {
      let that = this
      let featnum = await C.ajax('/shop/subjectSales/getsubjectfeat', { times: JSON.stringify(that.times) }, 'post')
      let ocategory = []
      let ototal = 0
      featnum.forEach((v) => {
        if (v.pid == 0) {
          featnum.forEach((j) => {
            if (j.pid == v.id) {
              ototal += j.allnum
            }
          })
          let alltotal = ototal + v.allnum
          if (alltotal > 0) {
            ocategory.push({'oname': v.name, 'ototal': ototal + v.allnum, 'id': v.id})
          }
          ototal = 0
        }
      })
      that.onelevelFeat = ocategory
      that.featnum = featnum
      that.getSpecificFeat()
    },

    getSpecificFeat: async function () {
      let that = this
      let res = await C.ajax('/shop/subjectSales/getspecificfeat', { times: JSON.stringify(that.times) }, 'post')
      that.featnum2 = res
    }
  }
}
</script>

<style>
    .flex_spcb{
        display:flex;
        justify-content: space-between;
    }
    #leftTable .el-table__body-wrapper{
        overflow-y: auto;
    }
    #leftTable .el-table__row{
        cursor: pointer;
    }
    .rowHead{
        padding: 10px;
        background-color: #fff;
        margin: 0px 0px 10px 0px !important;
    }         
    .groupHead span,.groupBody span{
        width: 33.33%;
        text-align: center;
    }
    .groupBody{
        padding: 5px 0;
    }
    .groupBody:hover{
        background-color: #FAFAFA;
        transition: background-color .25s ease;
        cursor: pointer;
    }    
</style>